<template>
  <div>
    <!-- <h2>动态详情</h2> -->
    <span class="kong"></span>
    <van-nav-bar title="动态详情" @click-left="onClickLeft" left-arrow fixed>
      <van-icon name="wap-nav" color="black" size="26" slot="right"/>
    </van-nav-bar>
    <div class="fb">
      <div class="head">
        <div class="left">
          <span class="yuan">
            <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
          </span>
          <div class="yhm">
            <p>我在海南遇见你</p>
            <p>1个小时前</p>
          </div>
        </div>
        <button class="btn" @click="fd($event)">+关注</button>
      </div>
      <div class="img">
        <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
      </div>
      <div class="ly">
        <p class="pd">刷个存在感！！！！！！！！！！</p>
      </div>
      <van-row type="flex" justify="space-between" class="van">
        <van-col span="6">
          <van-icon size="3em" name="comment-circle-o"/>
        </van-col>
        <van-col span="6">
          <van-icon size="3em" name="thumb-circle-o"/>
        </van-col>
        <van-col span="6">
          <van-icon size="3em" name="upgrade" @click="tanchu()"/>
        </van-col>
      </van-row>
    </div>
    <van-popup v-model="show" position="bottom">
      <share :config="config"></share>
    </van-popup>
    <div>
      <van-panel title="|全部评论(2)">
        <div class="pinlun">
          <div class="left">
            <span class="yuan">
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
            </span>
            <div class="yhm">
              <p>心如止水</p>
              <p>9月30号</p>
              <p>不错好评</p>
            </div>
          </div>
          <van-row type="flex" justify="space-between" class="van">
            <van-col span="6">
              <van-icon size="3em" name="thumb-circle-o"/>
            </van-col>
          </van-row>
        </div>

        <div class="pinlun">
          <div class="left">
            <span class="yuan">
              <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt>
            </span>
            <div class="yhm">
              <p>心如止水</p>
              <p>9月30号</p>
              <p>不错好评</p>
            </div>
          </div>
          <van-row type="flex" justify="space-between" class="van">
            <van-col span="6">
              <van-icon size="3em" name="thumb-circle-o"/>
            </van-col>
          </van-row>
        </div>
      </van-panel>
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
  name: "Dynamicdetails",
  data() {
    return {
      show: false,
      detail: "",
      fs: true,
      config: {
        url: "http://www.baidu.com", // 网址，默认使用 window.location.href
        source: "", // 来源（QQ空间会用到）, 默认读取head标签：<meta name="site" content="http://overtrue" />
        title: "hello", // 标题，默认读取 document.title 或者 <meta name="title" content="share.js" />
        description: "hi", // 描述, 默认读取head标签<meta name="description" content="PHP弱类型的实现原理分析" />
        image: "", // 图片, 默认取网页中第一个img标签
        sites: ["qzone", "qq", "weibo", "wechat", "douban"], // 启用的站点
        disabled: [], // 禁用的站点
        wechatQrcodeTitle: "微信扫一扫：分享", // 微信二维码提示文字
        wechatQrcodeHelper:
          "<p>微信里点“发现”，扫一下</p><p>二维码便可将本文分享至朋友圈。</p>"
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    tanchu() {
      this.show = true;
    },
    fd(a) {
      if (this.fs) {
        a.target.innerHTML = "已关注";
        this.fs = false;
      } else {
        a.target.innerHTML = "+关注";
        this.fs = true;
      }
    }
  },
  mounted() {
    var _this = this;
    console.log(this.$route.params.pid);
    axios({
      url: "http://www.baiu.com/api/" ,
      params:{id:this.$route.params.pid}
    }).then(function(data) {
      console.log(data.data.list);
      _this.detail = data.data.list;
    });
  }
};
</script>

<style scoped>
.fb {
  /* height: 594px; */
  line-height: 20px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 1);
}
.head {
  display: flex;
  height: 94px;
  justify-content: space-around;
  align-items: center;
}
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yuan {
  display: block;
  width: 49px;
  height: 49px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 50%;
}
.yuan img {
  display: block;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}
.yhm {
  margin-left: 10px;
}
.yhm p:nth-of-type(1) {
  height: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
}
.yhm p:nth-of-type(2) {
  height: 14px;
  color: rgba(155, 155, 155, 1);
  font-size: 12px;
  text-align: left;
  font-family: Arial-regular;
  margin: 13px 0px;
}
.yhm p:nth-of-type(3) {
  /* height: 4px; */
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial-regular;
  margin-top: -11px;
}
.pinlun p:nth-of-type(1) {
  margin-top: 0px;
}
.head .btn {
  width: 58px;
  height: 22px;
  border-radius: 4px;
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
  font-family: Arial;
  border: 1px solid rgba(187, 187, 187, 1);
}
.img img {
  width: 100%;
  height: 390px;
  background: #aaa;
}
.ly {
  height: 21px;
  border-bottom: 1px solid #aaa;
  line-height: 21px;
  margin-bottom: 10px;
}
.pd {
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin: 10px 0px 10px 30px;
  line-height: 21px;
}
.kong {
  display: block;
  height: 50px;
}
.pinlun {
  display: flex;
  height: 94px;
  justify-content: space-between;
  align-items: center;
  margin: 0px 15px;
}
</style>
